<template>
  <el-dialog
    v-el-drag-dialog
    title="申请单量统计"
    :visible.sync="visible"
    width="600px"
    @closed="closed"
  >
    <el-form ref="form" class="applyForm" :inline="true">
      <el-form-item label="申请统计日期：">
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          unlink-panels
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
        />
      </el-form-item>
    </el-form>
    <p class="tip">注意：由于数量量大，程序晚上才会计算执行，数据需要等到第二天才能统计出来</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closed">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import dayjs from 'dayjs'
  import { parseTime } from '@/utils'
  import { fenceReserveApply } from '@/api'
  export default {
    name: 'fenceApply',
    data() {
      return {
        visible: false,
        date: [dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '00:00:00',
               dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '23:59:59'],
        currentType: ''
      }
    },
    methods: {
      open(row) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (row) {
            this.currentType = row
          }
        })
      },
      confirm() {
        if (!(this.date && this.date.length > 0)) {
          this.$message.warning('请选择申请统计日期')
          return
        }
        const diff = dayjs(this.date[1]).diff(dayjs(this.date[0]), 'days')
        if (diff > 93) {
          this.$message.error('选择时间条件相差不能超过3个月')
          return
        }
        const that = this
        this.$confirm(`本次单量计算提交的统计日期是${parseTime(this.date[0], '{y}-{m}-{d}')}——${parseTime(this.date[1], '{y}-{m}-{d}')}，由于数量量大，程序晚上才会计算执行，数据需要等到第二天才能统计出来，是否确定提交申请？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const params = {
            statStartTime: dayjs(this.date[0]).format('YYYY-MM-DD') + ' ' + '00:00:00',
            statEndTime: dayjs(this.date[1]).format('YYYY-MM-DD') + ' ' + '23:59:59',
            applyType: this.currentType
          }
          const res = await fenceReserveApply(params)
          if (res) {
            this.$message.success('操作成功！')
            this.visible = false
            that.resolve()
          }
        })
      },
      closed() {
        this.data = [dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '00:00:00',
                     dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '23:59:59']
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.applyForm {
  padding: 40px 0;
}
.tip {
  color: red;
}
</style>
